24.0 KB · ⇊ 8 parts · ⤓ Micron 24.0 KB · ⤓ HTML 85.3 KB

top

mwbqVue.js (comunemente noto come mwbgVue, pronunciato /vjuː/, come mwcaviewcite-ref-1[1]) è un mwdqframework per applicazioni web mwdgJavaScript mwdwmweaopen source in configurazione mweqmodel-view-viewmodel per la creazione di mweginterfacce utente e mwewmwfasingle-page application. È stato creato da Evan You ed è gestito da lui e dai membri attivi del team principale, provenienti da varie società come mwfqNetlify e Netgurucite-ref-2[2].

• Panoramica

• Storia

• Versioni

• Caratteristiche

• Componenti

• Modelli

• Reattività

• Transizioni

• Routing

• Ecosistema

• Tooling ufficiale

• Librerie ufficiali

• Note

• Voci correlate

• Altri progetti

• Collegamenti esterni

Vue.js presenta un'architettura adottabile in modo incrementale che si concentra sul mwhqrendering dichiarativo e sulla composizione dei componenti. Le funzionalità avanzate richieste per applicazioni complesse come il mwhgrouting, lo mwhwstate management e gli mwiastrumenti di compilazione sono offerte tramite mwiqlibrerie e pacchetti di supporto ufficialmente mantenuticite-ref-3[3], che comprendono, tra le soluzioni più popolari, Nuxt.js.

Vue è stato creato da Evan You, dopo aver lavorato per mwkqGoogle utilizzando mwkgAngularJS in numerosi progetti. Ha proposto un sunto del suo processo di pensiero a seguito della sua esperienza: «Ho pensato, e se potessi solo estrarre la parte che mi piaceva molto di Angular e costruire qualcosa di veramente leggero?».cite-ref-4[4] Il primo mwlwmwmacommit del mwmqcodice sorgente del progetto è datato luglio 2013, mentre è stato pubblicato ufficialmente il febbraio successivo, nel 2014.

Quando viene pubblicata una nuova mwmwversione major, l'ultima versione mwnqminor diventerà una versione mwngmwnwLong Term Support (LTS) per diciotto mesi (correzioni di mwoabug e mwoqpatch di sicurezza) e per i successivi diciotto mesi sarà in modalità di manutenzione (solo patch di sicurezza)cite-ref-5[5].

| Versione | Data di pubblicazione | Titolo |

|---|---|---|

| 3.5 | 1 settembre 2024 [ 6 ] | Tengen Toppa Gurren Lagann |

| 3.4 | 28 dicembre 2023 [ 7 ] | Slam Dunk |

| 3.3 | 11 maggio 2023 [ 8 ] | Rurouni Kenshin |

| 3.2 | 5 agosto 2021 [ 9 ] | Quintessential Quintuplets |

| 3.1 | 7 giugno 2021 [ 10 ] | Pluto |

| 3.0 | 18 settembre 2020 [ 11 ] | One Piece |

| 2.7 | 1 luglio 2022 [ 12 ] | Naruto |

| 2.6 | 4 febbraio 2019 [ 13 ] | Macross |

| 2.5 | 13 ottobre 2017 [ 14 ] | Level E |

| 2.4 | 13 lug 2017 [ 15 ] | Kill la Kill |

| 2.3 | 27 aprile 2017 [ 16 ] | JoJo's Bizarre Adventure |

| 2.2 | 26 febbraio 2017 [ 17 ] | Initial D |

| 2.1 | 22 nov 2016 [ 18 ] | Hunter X Hunter |

| 2.0 | 30 settembre 2016 [ 19 ] | Ghost in the Shell |

| 1.0 | 27 ottobre 2015 [ 20 ] | Evangelion |

| 0.12 | 12 giugno 2015 [ 21 ] | Dragon Ball |

| 0.11 | 7 novembre 2014 [ 22 ] | Cowboy Bebop |

| 0.10 | 23 marzo 2014 [ 23 ] | Blade Runner |

| 0.9 | 25 febbraio 2014 [ 24 ] | Animatrix |

| 0.8 | 27 gennaio 2014 [ 25 ] | - |

| 0.7 | 24 dicembre 2013 [ 26 ] | - |

| 0.6 | 8 dicembre 2013 [ 27 ] | VueJS |

I componenti Vue estendono gli mwar4elementi HTML di base per incapsulare il codice riutilizzabile. A livello generale, i componenti sono elementi personalizzati a cui il compilatore di Vue associa una funzionalità. In Vue, un componente è essenzialmente un'mwar8istanza di Vue con opzioni predefinite.cite-ref-28[28]

Lo mwasumwasysnippet di codice seguente contiene l'esempio di un componente Vue. Il componente presenta un pulsante e stampa il numero di volte in cui si fa clic sul pulsante:

Vue utilizza una sintassi di modello basata su mwaf4HTML che consente di associare il mwaf8mwagaDocument Object Model (DOM) renderizzato ai dati dell'istanza di Vue sottostante. Tutti i modelli Vue sono HTML validi che possono essere analizzati da browser e mwageparser HTML conformi alle specifiche. Vue compila i modelli in funzioni di mwagirendering DOM virtuali. Un DOM virtuale consente a Vue di eseguire il mwagmrendering dei componenti in memoria prima di aggiornare il browser. In combinazione con il sistema di reattività, Vue è in grado di calcolare il numero minimo di componenti per eseguire nuovamente il mwagqrendering e applicare la quantità minima di manipolazioni DOM quando cambia lo stato dell'app.

Gli utenti di Vue possono utilizzare la sintassi del modello o scegliere di scrivere direttamente le funzioni di mwagyrendering utilizzando mwagcJSX.cite-ref-29[29] Le funzioni di mwagwrendering consentono di compilare l'applicazione da componenti software.cite-ref-30[30]

Vue presenta un sistema di reattività che utilizza semplici oggetti mwahmJavaScript e un mwahqre-rendering ottimizzato. Ogni componente tiene traccia delle sue dipendenze reattive durante il rendering, in modo che il sistema sappia esattamente quando eseguire nuovamente il mwahurendering e su quali componenti.cite-ref-31[31]

Vue offre una varietà di modi per applicare effetti di transizione quando gli elementi vengono inseriti, aggiornati o rimossi dal mwahwDOM. Ciò include strumenti per:

• Applicare automaticamente le classi per le transizioni e le animazioni mwah8CSS;

• Integrare librerie di animazione CSS di terze parti, come Animate.css;

• Utilizzare JavaScript per manipolare direttamente il DOM durante gli mwaiihook di transizione;

• Integrare librerie di animazione JavaScript di terze parti, come Velocity.js.

Quando un elemento di cui è stato eseguito il mwaiywrapping in un componente di transizione viene inserito o rimosso, questo è ciò che accade:

1. Vue rileverà automaticamente se all'elemento mwaiktarget sono state applicate transizioni o animazioni CSS. In tal caso, le classi di transizione CSS verranno aggiunte/rimosse nei tempi appropriati.

2. Se il componente di transizione ha fornito mwaishook di JavaScript, questi mwaiwhook verranno chiamati nei tempi appropriati.

3. Se non vengono rilevate transizioni/animazioni CSS e non vengono forniti mwai4hook di JavaScript, le operazioni DOM per l'inserimento e/o la rimozione verranno eseguite immediatamente sul frame successivo.cite-ref-32[32]cite-ref-33[33]

Uno svantaggio tipico delle mwajkapplicazioni a pagina singola (SPA) è l'incapacità di condividere collegamenti all'esatta "sotto" pagina all'interno di una pagina Web specifica. Poiché le SPA forniscono ai loro utenti solo una risposta basata su URL dal server (in genere serve mwajoindex.html o mwajsindex.vue), aggiungere segnalibri a determinate schermate o condividere collegamenti a sezioni specifiche è normalmente difficile se non impossibile. Per risolvere questo problema, molti router lato client delimitano i loro URL dinamici con un mwajwmwaj0hashbang (mwaj4#!), Ad esempio mwaj8pagina.com/#!/. Tuttavia, con mwakaHTML5 la maggior parte dei browser moderni supporta il mwakerouting senza mwakihashbang.

Vue fornisce un'interfaccia per modificare ciò che viene visualizzato sulla pagina in base al percorso URL corrente, indipendentemente da come è stato modificato (tramite collegamento via e-mail, aggiornamento o collegamenti in-page). Inoltre, l'utilizzo di un mwakqrouter lato mwakufront-end consente la transizione intenzionale del percorso del browser quando si verificano determinati eventi del browser (ad esempio clic) su pulsanti o collegamenti. Vue stesso non viene fornito con il mwakyrouting hash lato front-end, ma il pacchetto open source mwakcvue-router fornisce un'API per aggiornare l'URL dell'applicazione, supporta il pulsante Indietro (cronologia di navigazione) e reimpostazioni della password e-mail o collegamenti di verifica e-mail con parametri URL di autenticazione. Supporta il mwakgmapping di percorsi su componenti nidificati e offre un controllo di transizione a granularità fine. Con Vue, gli sviluppatori compongono applicazioni con piccoli blocchi costruendo componenti più grandi. Con mwakkvue-router aggiunto alla combinazione, i componenti devono essere semplicemente mappati alle mwakoroute a cui appartengono e le mwaksroute parent/mwakwroot devono indicare dove devono essere eseguito il mwak0rendering degli elementi figlio.cite-ref-34[34]

Il codice sopra:

1. Imposta un percorso front-end su mwapwnomesito.com/user/<id>, che verrà visualizzato nel componente mwap0User definito nella costante mwap4User

2. Consente al componente User di passare un ID particolare dell'utente che è stato digitato nell'URL usando la chiave mwaqaparams dell'oggetto mwaqe$route: mwaqi$route.params.id

3. Questo modello (che varia in base ai parametri passati nel mwaqqrouter) verrà renderizzato in mwaqu<router-view></router-view> all'interno del mwaqydiv con ID mwaqcapp presente nel DOM

4. L'HTML generato alla fine per qualcuno che digita: mwaqknomesito.com/user/1 sarà:

cite-ref-35[35]

La libreria principale include strumenti e librerie sviluppati sia dal team principale che dai collaboratori.

• Devtools - estensione devtools del browser per il debug delle applicazioni Vue.js

• Vue CLI - tool standard per un rapido sviluppo di Vue.js

• Vue Loader - caricatore di webpack che consente la scrittura dei componenti Vue in un formato chiamato Single-File Components (SFCs)

• Vue Router - il router ufficiale di Vue.js

• Vuex - gestore di stato centralizzato ispirato a Flux per Vue.js

• Vue Server Renderer - rendering lato server per Vue.js

cite-note-11. ↑ mwat8(mwauamwaueEN) mwauimwaumVue.js, su mwauqvuejs.org. mwauuURL consultato il 16 febbraio 2025.

cite-note-22. ↑ mwauk(mwauomwausEN) mwauwmwau0Meet the Team, su mwau4vuejs.org. mwau8URL consultato il 17 novembre 2019.

cite-note-33. ↑ mwavm(mwavqmwavuEN) mwavymwavcEvan is creating Vue.js, su mwavgmwavkPatreon. mwavoURL consultato il 17 novembre 2019.

cite-note-44. ↑ mwav4(mwav8mwawaEN) mwawemwawiBetween the Wires: An interview with Vue.js creator Evan You, in mwawmfreeCodeCamp, 30 maggio 2017. mwawqURL consultato il 17 novembre 2019.

cite-note-55. ↑ mwawg(mwawkmwawoEN) mwawsvuejs/roadmap: 🗺️ Roadmap for the Vue.js project (archive), su mwawwgithub.com. mwaw0URL consultato il 19 luglio 2025.

cite-note-61. mwaxe(mwaximwaxmEN) mwaxqmwaxuAnnouncing Vue 3.5 | The Vue Point, su mwaxyblog.vuejs.org. mwaxcURL consultato il 25 ottobre 2024.

cite-note-72. mwaxsmwaxwmwax0Announcing Vue 3.4 | The Vue Point, su mwax4blog.vuejs.org. mwax8URL consultato il 4 giugno 2024.

cite-note-83. mwaym(mwayqmwayuEN) mwayymwaycRelease v3.3.0 "Rurouni Kenshin" · vuejs/core, su mwayggithub.com. mwaykURL consultato il 16 febbraio 2025.

cite-note-94. mway0(mway4mway8EN) mwazamwazeRelease v3.2.0 Quintessential Quintuplets · vuejs/core, su mwazigithub.com. mwazmURL consultato il 16 febbraio 2025.

cite-note-105. mwazc(mwazgmwazkEN) mwazomwazsRelease v3.1.0 Pluto · vuejs/core, su mwazwgithub.com. mwaz0URL consultato il 16 febbraio 2025.

cite-note-116. mwa0e(mwa0imwa0mEN) mwa0qmwa0uRelease v3.0.0 One Piece · vuejs/core, su mwa0ygithub.com. mwa0cURL consultato il 16 febbraio 2025.

cite-note-127. mwa0s(mwa0wmwa00EN) mwa04mwa08Release v2.7.0 "Naruto" · vuejs/vue, su mwa1agithub.com. mwa1eURL consultato il 16 febbraio 2025.

cite-note-138. mwa1u(mwa1ymwa1cEN) mwa1gmwa1kRelease v2.6.0 Macross · vuejs/vue, su mwa1ogithub.com. mwa1sURL consultato il 16 febbraio 2025.

cite-note-149. mwa18(mwa2amwa2eEN) mwa2imwa2mRelease v2.5.0 Level E · vuejs/vue, su mwa2qgithub.com. mwa2uURL consultato il 16 febbraio 2025.

cite-note-1510. mwa2k(mwa2omwa2sEN) mwa2wmwa20Release v2.4.0 Kill la Kill · vuejs/vue, su mwa24github.com. mwa28URL consultato il 16 febbraio 2025.

cite-note-1611. mwa3m(mwa3qmwa3uEN) mwa3ymwa3cRelease v2.3.0 JoJo's Bizarre Adventure · vuejs/vue, su mwa3ggithub.com. mwa3kURL consultato il 16 febbraio 2025.

cite-note-1712. mwa30(mwa34mwa38EN) mwa4amwa4eRelease v2.2.0 Initial D · vuejs/vue, su mwa4igithub.com. mwa4mURL consultato il 16 febbraio 2025.

cite-note-1813. mwa4c(mwa4gmwa4kEN) mwa4omwa4sRelease v2.1.0 Hunter X Hunter · vuejs/vue, su mwa4wgithub.com. mwa40URL consultato il 16 febbraio 2025.

cite-note-1914. mwa5e(mwa5imwa5mEN) mwa5qmwa5uRelease v2.0.0 Ghost in the Shell · vuejs/vue, su mwa5ygithub.com. mwa5cURL consultato il 16 febbraio 2025.

cite-note-2015. mwa5s(mwa5wmwa50EN) mwa54mwa58Release 1.0.0 Evangelion · vuejs/vue, su mwa6agithub.com. mwa6eURL consultato il 16 febbraio 2025.

cite-note-2116. mwa6u(mwa6ymwa6cEN) mwa6gmwa6kRelease 0.12.0: Dragon Ball · vuejs/vue, su mwa6ogithub.com. mwa6sURL consultato il 16 febbraio 2025.

cite-note-2217. mwa68(mwa7amwa7eEN) mwa7imwa7mRelease v0.11.0: Cowboy Bebop · vuejs/vue, su mwa7qgithub.com. mwa7uURL consultato il 16 febbraio 2025.

cite-note-2318. mwa7k(mwa7omwa7sEN) mwa7wmwa70Release v0.10.0: Blade Runner · vuejs/vue, su mwa74GitHub. mwa78URL consultato il 16 febbraio 2025.

cite-note-2419. mwa8m(mwa8qmwa8uEN) mwa8ymwa8cRelease v0.9.0: Animatrix · vuejs/vue, su mwa8ggithub.com. mwa8kURL consultato il 16 febbraio 2025.

cite-note-2520. mwa80(mwa84mwa88EN) mwa9amwa9eRelease v0.8.0 · vuejs/vue, su mwa9igithub.com. mwa9mURL consultato il 16 febbraio 2025.

cite-note-2621. mwa9c(mwa9gmwa9kEN) mwa9omwa9sRelease v0.7.0 · vuejs/vue, su mwa9wgithub.com. mwa90URL consultato il 16 febbraio 2025.

cite-note-2722. mwa-e(mwa-imwa-mEN) mwa-qmwa-uRelease 0.6.0: VueJS · vuejs/vue, su mwa-ygithub.com. mwa-cURL consultato il 16 febbraio 2025.

cite-note-2828. ↑ mwa-s(mwa-wmwa-0EN) mwa-4mwa-8Components Basics, su mwa-avuejs.org. mwa-eURL consultato il 17 novembre 2019.

cite-note-2929. ↑ mwa-u(mwa-ymwa-cEN) mwa-gmwa-kTemplate Syntax, su mwa-ovuejs.org. mwa-sURL consultato il 17 novembre 2019.

cite-note-3030. ↑ mwa-8(mwbaamwbaeEN) Evan You, mwbaimwbamVue 2.0 is Here!, in mwbaqThe Vue Point, mwbauMedium, 30 settembre 2016. mwbayURL consultato il 17 novembre 2019.

cite-note-3131. ↑ mwbao(mwbasmwbawEN) mwba0mwba4Reactivity in Depth, su mwba8vuejs.org. mwbbaURL consultato il 17 novembre 2019.

cite-note-3232. ↑ mwbbq(mwbbumwbbyEN) mwbbcmwbbgEnter/Leave & List Transitions, su mwbbkvuejs.org. mwbboURL consultato il 17 novembre 2019.

cite-note-3333. ↑ mwbb4(mwbb8mwbcaEN) mwbcemwbciState Transitions, su mwbcmvuejs.org. mwbcqURL consultato il 17 novembre 2019.

cite-note-3434. ↑ mwbcg(mwbckmwbcoEN) mwbcsmwbcwRouting, su mwbc0vuejs.org. mwbc4URL consultato il 17 novembre 2019.

cite-note-3535. ↑ mwbdi(mwbdmmwbdqEN) mwbdumwbdyNested Routes, su mwbdcVue Router. mwbdgURL consultato il 17 novembre 2019.

• mwbdwReactJS

• mwbd4AngularJS

• mwbeaAngular

• mwbeiModel-View-viewmodel

• mwbeqJavaScript

Altri progetti

• Wikimedia Commons

• Wikimedia Commons contiene immagini o altri file su Vue.js

• (EN) Sito ufficiale, su vuejs.org.

• (EN) Blog ufficiale, su blog.vuejs.org.

• citerefopen-library(EN) Opere riguardanti Vue.js (Javascript framework), su Open Library, Internet Archive.

• Vue.js / Vue.js (altra versione), su packages.debian.org.

• citerefgithub(EN) Vue.js, su GitHub.

• citereffree-software-directory(EN) Vue.js, su Free Software Directory.